<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">索引栏</view>
		</w-navbar>

		<w-indexBar :scrollTop="scrollTop" :indexList="indexList">
			<w-indexBarItem :index="item.initial" v-for="(item, index) in city" :key="index">
				<view class="index-content-item">
					<view class="index-header">{{ item.initial }}</view>
					<view class="index-content-wrap">
						<view class="index-text" v-for="it in item.city" :key="it">{{it}}</view>
					</view>
				</view>
			</w-indexBarItem>
		</w-indexBar>
	</view>
</template>

<script>
	import city from '@/static/json/city.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: [],
				city: city,
			};
		},
		mounted() {
			let indexList = []
			city.forEach(item => {
				indexList.push(item.initial)
			})
			this.indexList = indexList
		},
		onPageScroll({
			scrollTop
		}) {
			this.scrollTop = scrollTop;
		}
	};
</script>

<style lang="scss">
	.index-content-item {
		.index-header {
			padding-left: 20rpx;
			background-color: #f1f1f1;
			height: 80rpx;
			display: flex;
			align-items: center;
			font-size: 42rpx;
		}

		.index-content-wrap {
			padding: 20rpx;
			background-color: #fff;

			.index-text {
				height: 80rpx;
				line-height: 80rpx;
				color: #484848;
			}
		}

	}
</style>
